<template>
  <div class="view">
    <x-header :left-options="{backText: ''}">邀请好友</x-header>
    <div class="erweima">
      <div class="qrdiv">
        <qrcode :size="size * 3.2" :value="value" :fg-color="fgColor"></qrcode>
        <p>{{username.substr(0, 3) + "****" + username.substr(7)}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Qrcode, XHeader } from 'vux'
import { mapState } from 'vuex'
export default {
  components: {
    Qrcode,
    XHeader
  },
  computed: {
    ...mapState(['user'])
  },
  created () {
    this.username = this.user.user_name
  },
  data () {
    return {
      value: '',
      fgColor: '#000000',
      username: '',
      size: document.documentElement.clientWidth / 7.5
    }
  },
  mounted: function () {
    this.value = 'https://hxapi.axccn.cn/index.html#/regist?invitecode=' + this.user.user_name + '&isp2pcode=true' + '&goodsid=' + this.$route.query.id //  把需要绑定的变量，赋值给data里面声明的变量
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  @import '../../assets/css/pub';
  #app{
    .view {
      position: relative;
      /deep/ .vux-header {
        background: rgba(0,0,0,0);
        position: absolute;
        width: 100%;
        z-index: 2;
        .vux-header-left {
          .left-arrow:before {
            border-color: #ffffff;
          }
          i {
            color: #ffffff;
          }
        }
        .vux-header-title {
          color: #ffffff;
        }
      }
      .erweima {
        text-align: center;
        width: 100%;
        height: 100vh;
        background: url("../../assets/img/my/share_poster_img.png")
        round;
      }
      .qrdiv {
        position: absolute;
        top: 47%;
        left: 51%;
        transform: translate(-50%, -50%);
        p{
          text-align: center;
        }
      }
    }
  }
</style>
